<template>
  <div class="technologydataEdit">
    <div class="technologydataEdit-one">
      <div></div>
      <!-- <el-radio-group v-model="data.type_id" @change="onRadio">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button
          :label="item.type_id"
          v-for="(item, index) in cities"
          :key="index"
          >{{ item.title }}</el-radio-button
        >
      </el-radio-group> -->
      <el-button
        type="primary"
        icon="el-icon-upload"
        size="mini"
        @click="dialogVisible = true"
        v-if="!disabled && isClick==2"
        >上传文件</el-button
      >
    </div>
    <el-table :data="tableData" size="mini" style="width: 100%; margin-top: 20px" border>
      <el-table-column label="文件名称" align="center" prop="title">
        <template slot-scope="{ row }">
          <div>
            <i class="el-icon-folder-opened"></i>
            {{ row.title }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="文件类别" align="center" prop="type_id">
        <template slot-scope="{ row }">
          <div v-if="row.id != editdata.id">
            {{ row.type_id | type(row.type_id) }}
          </div>
          <div v-else>
            <el-select v-model="editdata.type_id" placeholder="请选择">
              <el-option
                v-for="item in cities"
                :key="item.type_id"
                :label="item.title"
                :value="item.type_id"
              >
              </el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="颜色" align="center" prop="type_id">
        <template slot-scope="{ row }">
          <div v-if="row.id != editdata.id">
            {{ row.color_title }}
          </div>
          <div v-else>
            <el-select v-model="editdata.color_title" placeholder="请选择">
              <el-option
                v-for="item in Colour"
                :key="item.color_title"
                :label="item.color_title"
                :value="item.color_title"
              >
              </el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="上传人员" align="center" prop="username">
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="{ row }">
          <div v-if="!row.type_id">
            未启用
          </div>
          <div v-else :style="{ color: row.status == 1 ? '#67C23A' : '#F56C6C' }">
            {{ row.status == 1 ? "启用" : "禁用" }}
          </div>
          
        </template>
      </el-table-column>
      <el-table-column label="上传时间" align="center" prop="createtime">
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remarks">
        <template slot-scope="{ row }">
          <div v-if="row.id != editdata.id">
            {{ row.remarks }}
          </div>
          <div v-else>
            <el-input
              v-model="editdata.remarks"
              placeholder=""
              size="normal"
              clearable
            ></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="{ row }">
          
          
          <el-button
            type="text"
            @click="onEdit(row)"
            v-if="row.id != editdata.id && !disabled && isClick==2"
            >编辑</el-button
          >
          <el-button type="text" @click="onSave()" v-if="row.id == editdata.id && !disabled">保存</el-button>
          <!-- <el-button type="text" style="color: red" @click="onIs(row.id, 0)"
            >删除</el-button
          > -->
          <el-button
            type="text"
            style="color: #67c23a"
            v-if="row.status == 0 && !disabled && isClick==2"
            @click="onIs(row.id, 1)"
            >启用</el-button
          >
          <el-button
            type="text"
            @click="onDownload(row)"
            v-if="row.id != editdata.id"
            >下载</el-button
          >
          <!-- <el-button type="text" style="color: red" @click="onDelete(row.id)"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="上传文件" :modal="false" :visible.sync="dialogVisible" width="30%">
      <el-upload
        class="upload-demo"
        ref="fileGy"
        drag
        action="https://ssy.13yu.com/index.php/Admin/Operate/upload_sealed_sample"
        multiple
        accept=".dxf, .plt, .prj, .fgs,"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传.dxf, .plt, .prj, .fgs文件
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  postAdminOperateLook_sealed_sample,
  postAdminOperateAdd_sealed_sample,
  postAdminOperateSet_sealed_sample,
  postAdminOperateEnable_sealed_sample,
  postAdminOperateGetStyleColour
} from "@/api";
export default {
  props: {
    type_no: "",
    id:"",
    disabled:false,
    isClick:""
  },
  filters: {
    type(e) {
      if (e == 1) {
        return "封样板";
      }
      if (e == 2) {
        return "压皱板";
      }
      if (e == 3) {
        return "绣花板";
      }
      if (e == 5) {
        return "大货样板";
      }
      if (e == 6) {
        return "绣花全码版";
      }
      return "暂无";
    },
  },
  data() {
    return {
      dialogVisible: false,
      editdata: {
        id: "",
        group_id: 2,
        type_id: "",
        type_no: "",
        remarks: "",
      },
      index: "",
      row: "",
      cities: [
        {
          title: "大货样板",
          type_id: "5",
        }
        // {
        //   title: "绣花全码版本",
        //   type_id: "6",
        // }
      ],
      data: {
        type_no: "",
        group_id: 2,
        type_id: "",
      },
      tableData: [],
    };
  },
  mounted() {
    this.postAdminOperateLook_sealed_sample();
    this.postAdminOperateGetStyleColour();
  },
  methods: {
     // 颜色
     async postAdminOperateGetStyleColour() {
      let id = this.id;
      let obj = {
        id,
      };
      let res = await postAdminOperateGetStyleColour(obj);
      let datas = res.data;
      let data = datas.map((e) => {
        e.color_title = e.colour_number + "-" + e.colour;
        return e;
      });
      data.unshift({ color_title: "通用" });
      console.log("data", data);
      this.Colour = data;
    },
    onDownload(row){
       window.open('https://ssy.13yu.com/index.php/Admin/Operate/downlond_sealed_sample?id='+row.id)
    },
    async onIs(id, status) {
      let obj = {
        id: id,
        type_no: this.type_no,
      };
      this.$confirm(`确定${status == 0 ? "禁用" : "启用"}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await postAdminOperateEnable_sealed_sample(obj);
          this.postAdminOperateLook_sealed_sample();
        })
        .catch(() => {});
    },
    onEdit(row) {
      let { editdata } = this;
      editdata.id = row.id;
      editdata.type_id = row.type_id;
      editdata.remarks = row.remarks;
      editdata.type_no = this.type_no;
    },
    async onSave() {
      let { editdata } = this;
      await postAdminOperateSet_sealed_sample(editdata);
      this.editdata = {
        id: "",
        group_id: 2,
        type_id: "",
        type_no: "",
        remarks: "",
      };
      this.postAdminOperateLook_sealed_sample();
    },
    async clickSubmit() {
      console.log(this.$refs.fileGy.uploadFiles);
      let filelist = this.$refs.fileGy.uploadFiles;
      let files = [];
      if (filelist.length) {
        filelist.forEach((element) => {
          let data = element.response.data.file;
          files.push(data);
        });
      } else {
        return this.$message.warning("请上传文件");
      }
      let data = {
        files,
        type_no: this.type_no,
        group_id: 2,
      };
      await postAdminOperateAdd_sealed_sample(data);
      this.$refs.fileGy.uploadFiles = [];
      this.postAdminOperateLook_sealed_sample();
      this.dialogVisible = false;
    },
    onRadio(e) {
      this.postAdminOperateLook_sealed_sample();
    },
    async postAdminOperateLook_sealed_sample() {
      let { data } = this;
      data.type_no = this.type_no;
      try {
        let res = await postAdminOperateLook_sealed_sample(data);
        res.data = res.data || [];
        this.tableData = res.data.list;
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped>
.technologydataEdit {
  .technologydataEdit-one {
    display: flex;
    justify-content: space-between;
  }
}
</style>